<template>
  <div class="detailMain" id="rbody">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button
            type="primary"
            @click="edit()"
            v-if="true"
          >
            编辑
          </a-button>
          <a-button
            type="primary"
            @click="confirmHint('', 'audit')"
            v-if="isOperate"
          >
            提交审核
          </a-button>
          <a-button type="primary" @click="backList">返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="基础信息" key="0">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户分类：</p>
            <p>{{detailData.category_name + '/' + detailData.tag_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*门店定位：</p>
            <p>{{detailData.location}}</p>
          </a-col>
          <a-col :span="8">
            <p>*所属区域：</p>
            <p>{{detailData.province_name + ' ' + detailData.city_name + ' ' + detailData.district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*详细地址：</p>
            <p>{{detailData.address_detail}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="推荐人信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*推荐人姓名：</p>
            <p>{{detailData.partner_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*推荐人手机号：</p>
            <p>{{detailData.partner_phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="门头信息(商家简称需要与门头照片一致)" key="2">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商家简称：</p>
            <p>{{detailData.merchant_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>*门头照片：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="headImg" alt @click="showImg(headImg)">
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="营业信息" key="3">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*营业时间：</p>
            <p>{{detailData.business_start + '--' + detailData.business_end}}</p>
          </a-col>
          <a-col :span="8">
            <p>*人均消费：</p>
            <p>{{detailData.per_consume}}</p>
          </a-col>
          <a-col :span="8">
            <p>*客服电话：</p>
            <p>{{detailData.service_phone}}</p>
          </a-col>
          <a-col :span="8">
            <p>*发行额度：</p>
            <p>{{detailData.amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>*折扣：</p>
            <p>{{detailData.discount}}</p>
          </a-col>
          <!-- <a-col :span="8">
            <p>*是否打造网红：</p>
            <p>{{detailData.is_red === "true" ? '是' : '否'}}</p>
          </a-col> -->
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="*店内照片（需要简洁干净的店内照片，最少5张，最多12张）" key="4">
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*店内照片：</p> -->
            <ul class="pic-show">
              <li v-for="item in storePic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)">
                <!-- <i class="oneline" :title="item.tag_name">{{item.tag_name}}</i> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="*产品照片（需要清晰且完整的产品照片，最少5张，最多12张）" key="5">
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*产品照：</p> -->
            <ul class="pic-show">
              <li v-for="item in productPic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)">
                <!-- <i class="oneline" :title="item.tag_name">{{item.name}}</i> -->
                <!-- <span v-if="item.price ? true : false">价格: {{item.price}}</span> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="*价格表照片（需要清晰且完整的价格表照片，最少1张，最多12张）" key="6">
        <a-row :gutter="16">
          <a-col :span="24">
            <!-- <p>*价格表照：</p> -->
            <ul class="pic-show">
              <li v-for="item in pricePic" :key="item.id">
                <img :src="item.cover_org" alt @click="showImg(item.cover_org)">
                <!-- <i class="oneline" :title="item.tag_name">{{item.tag_name}}</i> -->
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="法人信息" key="7">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*法人姓名：</p>
            <p>{{detailData.law_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*身份证：</p>
            <p>{{detailData.law_idno}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="营业执照信息（执照文字需清晰可见且完整，且与名称、类型保持一致）" key="8">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>*执照名称：</p>
            <p>{{detailData.store_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>*营业执照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="license" alt @click="showImg(license)">
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="经营许可证(选填,许可证文字需清晰可见且完整)" key="9">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>经营许可证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="licensePremit" alt @click="showImg(licensePremit)">
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="结算信息" key="10">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*账号类型：</p>
            <p>{{bankType}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行：</p>
            <p>{{detailData.bankname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*银行账号：</p>
            <p>{{detailData.bankcard}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行支行：</p>
            <p>{{detailData.branchname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户地区：</p>
            <p>{{detailData.bank_province_name + detailData.bank_city_name + detailData.bank_district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*会员账号：</p>
            <p>{{detailData.member_account}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="注册信息" key="11">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*手机号码：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <!-- <a-collapse-panel header="费率信息" key="12">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户结算费率：</p>
            <p>{{detailData.settle_rate}}</p>
          </a-col>
          <a-col :span="8">
            <p>*产品交易手续费：</p>
            <p>{{detailData.trade_rate}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel> -->
      <!-- <a-collapse-panel header="审核记录" key="13"></a-collapse-panel> -->
    </a-collapse>
    <div class="full-screen-wrap" v-show="isShowImg" @click="isShowImg=false">
      <div class="code-img store-img" id="storeImg"></div><br/>
      <!-- <div class="transformPic">
        <a-button type="primary"><a-icon type="undo" />左转</a-button>
        <a-button type="primary"><a-icon type="redo" />右转</a-button>
      </div> -->
    </div>
    <div class="modal-wrap">
      <confirm-modal :hint="hint" @handleConfirm="handleConfirmOk" ref="openModal"/>
    </div>
    <back-top />
  </div>
</template>

<script>
import { inviteShowDetail, submitAudit } from '../../store/providerApi.js'

export default {
  name: 'ProviderCashWithdrawalDetail',
  data() {
    return {
      activeKey: [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11'
      ],
      isShowImg: false,
      detailData: {},
      visible: false,
      maskClosable: false,
      remarkTxt: '',
      hint: '',
      auditTitle: '0',
      btnFlag: false,
      headImg: '', // 门头照片
      licensePremit: '', // 经营许可证
      license: '', // 营业执照
      storePic: [], // 店内照片
      pricePic: [], // 价格表照片
      productPic: [], // 产品照片
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    isOperate () {
      if (this.detailData.status === 1) {
        return false
      } else {
        return true
      }
    },
    bankType () {
      if (this.detailData.bank_type == 0) {
        return ''
      } else if (this.detailData.bank_type == 1) {
        return '对公账户'
      } else if (this.detailData.bank_type == 2) {
        return '法人账户'
      }
    }
  },
  methods: {
    // 跳转编辑
    edit () {
      this.$router.push({
        path: "/menu/provider/InvitemerchantsEdit",
        query: { id: this.$route.query.id }
      })
    },
    // 提交审核
    confirmHint (item, type) {
      if (this.isAllComputed === false) {
        this.$message.warning('必填信息填写不完整，无法提交审核！')
      } else if (this.isAllComputed === true) {
        if (type === 'audit') {
          this.hint = 7
        }
        this.$refs.openModal.openModal()
      }
    },
    handleConfirmOk () {
      submitAudit ({
        id: this.$route.query.id
      }).then(res => {
        this.$message.success(res.data.message)
        this.$router.push('/menu/provider/inviteMerchantList')
      })
    },
    // 返回
    backList() {
      this.$router.push('/menu/provider/inviteMerchantList')
    },
    // 获取详情数据
    getData() {
      inviteShowDetail({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
        console.log(111)
        this.storePic = res.data.store_pics
        this.pricePic = res.data.price_pics
        this.headImg = res.data.head_img
        this.productPic = res.data.product_pics
        this.licensePremit = res.data.license_premit
        this.license = res.data.license
        this.isAllComputed = res.data.can_verify
      })
    },
    // 放大图片查看
    showImg(img) {
      this.isShowImg = true
      document.getElementById("storeImg").innerHTML = `<img src="${img}">`
    }
  }
}
</script>

<style lang="scss" scoped>
.go-top {
  position: fixed;
  bottom: 150px;
  right: 30px;
  z-index: 100;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid #999; /*no*/
  text-align: center;
  background-color: #f00;
}
</style>
